<template>
	<view>
		<Header title="解绑" :showBack="true"></Header>
		<view class="card">
			IC卡号：{{cardNum}}
		</view>
		
		<button @click="open" type="default">解绑会员卡</button>
		
		<view class="tishi">
			解绑后将清空实体卡余额。钱款将保留在本手机对应的会员卡，您可以通过本程序绑定会员卡，继续使用会员卡进行支付，重新绑定实体卡后会同步余额
		</view>
		
		<view class="zzc" v-show="show" @click="open">
			<view @click.stop="">
				<view>
					<view>请输入新的会员卡号已完成解绑</view>
					<view><input v-model="newCard" type="text" value="" /></view>
				</view>
				<view>
					<view @click="open" style="border-right: 1upx solid #C0C0C0;color: #2BAC6B;">取消</view>
					<view @click="summit()">确定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				cardNum:uni.getStorageSync('cardNo'),
				show:false,
				newCard:''
			}
		},
		methods: {
			open(){
				this.show=!this.show
			},
			summit(){
				this.open()
				this.$http('/minprogram/api/member/unBindMemberCard?cardNo='+this.cardNum+'&newCardNo='+this.newCard,{},res=>{
					if(res.data.value==true){
						uni.showToast({
							icon:'none',
							title:'操作成功'
						})
						setTimeout(()=>{
							uni.reLaunch({
								url:'/pages/index/index?type=1'
							})
						},1200)
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
page{
	background-color: #FFFFFF;
}
.card{
	width: 95%;
	margin: 30upx auto 0;
	background-color: #FFFFFF;
	border-radius: 12upx;
	height: 150upx;
	line-height: 150upx;
	font-size: 40upx;
	text-indent: 80upx;
}

	button{
		width: 93%;
		margin: 30upx auto 0;
		background-color: #2BAC6B;
		height: 80upx;
		line-height: 80upx;
		font-size: 30upx;
		color: #FFFFFF;
	}
	.tishi{
		width: 90%;
		margin: 40upx auto 0;
		font-size: 26upx;
		color: #666666;
	}
	.zzc{
		width: 100%;
		height: 100vh;
		z-index: 1000;
		position: fixed;
		top: 0;
		background-color: rgba(0,0,0,0.4);
		>view{
			width: 70%;
			height: 280upx;
			background-color: #FFFFFF;
			border-radius: 20upx;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			>view:first-child{
				height: 183upx;
				text-align: center;
				>view:first-child{
					height: 100upx;
					line-height: 120upx;
					font-size: 28upx;
					font-weight: 500;
				}
				>view:last-child{
					height: 70upx;
					font-size: 26upx;
					color: #999999;
					>input{
						margin: 0 auto;
						border: 1upx solid #999999;
						width: 80%;
					}
				}
			}
			>view:last-child{
				display: flex;
				border-top: 1upx solid #C0C0C0;
				>view{
					width: 50%;
					height: 96upx;
					line-height: 96upx;
					text-align: center;
					font-size: 28upx;
				}
			}
		}
	}
</style>
